<template>
  <div>
    <div class="background">
      <img :src="imgUrl" width="100%" height="100%" alt="" />
    </div>
    <el-form class="login-form" style="width:100%;padding-left: 25%">
      <el-select v-model="value" placeholder="请选择" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "ArticleType",
  components: {},
  data() {
    return {
      value: "1",
      options: [
        {
          value: "1",
          label: "汤河桥街道办",
        },
        {
          value: "2",
          label: "宝马社区",
        },
        {
          value: "3",
          label: "一孔桥大队",
        },
        {
          value: "4",
          label: "人民路社区",
        },
        {
          value: "5",
          label: "南岸社区",
        },
        {
          value: "6",
          label: "车站路社区",
        },
        {
          value: "7",
          label: "奔二巷社区",
        },
        {
          value: "8",
          label: "奔六巷社区",
        },
      ],
      imgUrl: require("../../../assets/images/party_thq.png"),
      // 遮罩层
      loading: true,
    };
  },
  created() {},
  methods: {
    onChange(value) {
      if (value == 1) {
        this.imgUrl = require("../../../assets/images/party_thq.png");
      }
      if (value == 2) {
        this.imgUrl = require("../../../assets/images/party_bm.png");
      }
      if (value == 3) {
        this.imgUrl = require("../../../assets/images/party_ykq.png");
      }
      if (value == 4) {
        this.imgUrl = require("../../../assets/images/party_rml.png");
      }
      if (value == 5) {
        this.imgUrl = require("../../../assets/images/party_na.png");
      }
      if (value == 6) {
        this.imgUrl = require("../../../assets/images/party_cz.png");
      }
      if (value == 7) {
        this.imgUrl = require("../../../assets/images/party_br.png");
      }
      if (value == 8) {
        this.imgUrl = require("../../../assets/images/party_bl.png");
      }

      console.log(value);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  position: absolute;
}

.front {
  z-index: 1;
  position: absolute;
}
.login-form {
  padding: 25px 25px 5px 25px;
  margin-left: 75%;
}
</style>

